<template>
  <div>
    <el-table
        :data="commentList"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="commentCreated"
          fixed
          label="日期"
          width="240">
      </el-table-column>
      <el-table-column
          prop="commentUsername"
          label="姓名"
          width="100">
      </el-table-column>
      <el-table-column
          prop="commentContent"
          label="评论"
          width="200">
      </el-table-column>
      <el-table-column
          prop="weiboContent"
          label="微博"
          width="200">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="170">
        <template slot-scope="scope">
          <div style="display: flex">
            <div style="margin-right: 10px">
              <el-popconfirm
                  title="这是一段内容确定删除吗？" @confirm="deleteById(scope.row.weiboId)">
                <el-button slot="reference" type="text" size="small">移除</el-button>
              </el-popconfirm>
            </div>
            <el-button type="text" @click="editContent(scope.row)" size="small">查看</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>


    <el-drawer
        title="查看"
        :visible.sync="dialog"
        direction="ltr"
        custom-class="demo-drawer"
        ref="drawer">
      <div class="demo-drawer__content">
        <div style="margin: 10px 20px;">
          <div>
            <p>评论时间:&nbsp;
              <el-card>
                {{ commentObject.commentCreated }}
              </el-card>
            </p>
          </div>
          <div>
            <p>评论用户:&nbsp;
              <el-card>
                {{ commentObject.commentUsername }}
              </el-card>
            </p>
          </div>
          <div>
            <p>评论内容:&nbsp;</p>
            <el-card>
              <p style="">{{ commentObject.commentContent }}</p>
            </el-card>
          </div>
          <div>
            <p>评论微博:&nbsp;
              <el-card>
                {{ commentObject.weiboContent }}
              </el-card>
            </p>
          </div>
        </div>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commentList: [],
      dialog: false,
      loading: false,
      commentObject: {},
      commentListContent: []
    }
  },
  methods: {
    editContent(content) {
      for (let i = 0; i < this.commentList.length; i++) {
        if (this.commentListContent[i].commentId === content.commentId) {
          this.commentObject = this.commentListContent[i];
        }
      }
      this.dialog = true;
    },
    deleteById(id) {
      this.axios.delete('http://localhost:19000/v1/comment/delete-comment',
          {
            params: {
              id: id
            }
          })
          .then((response) => {
            if (response.data.code == 20000) {
              this.$message.success("删除成功！！！")
              this.$router.go(0)
            } else {
              this.$message.error(response.data.message)
            }
          })
    },
    tableRowClassName(row, rowIndex) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },

    sliceString(commentListTemp) {
      const newCommentListContent = [];
      for (let i = 0; i < commentListTemp.length; i++) {
        const newItem = {
          ...commentListTemp[i],
          commentContent: commentListTemp[i].commentContent.length > 20? commentListTemp[i].commentContent.slice(0, 20) + "..." : commentListTemp[i].commentContent
        };
        newCommentListContent.push(newItem);
      }
      this.commentList = newCommentListContent;
    }
  },
  mounted() {
    const id = JSON.parse(localStorage.getItem("user")).id;
    console.log(id)
    this.axios.get('http://localhost:19000/v1/comment/select-comment', {
      params: {
        userId: id
      }
    })
        .then((response) => {
          if (response.data.code === 20000) {
            this.commentListContent = response.data.data;
            this.sliceString(this.commentListContent)
          }
        })
  }
}
</script>

<style scoped>
.demo-drawer__content > div > div {
  margin-bottom: 20px;
}

.demo-drawer__footer {
  text-align: right;
  margin-top: 100px;
  margin-right: 20px;
}

.el-card {
  word-wrap: break-word;
}

/deep/ .el-textarea__inner {
  background-color: #f4f4f4;
  line-height: 1.5;
}

/deep/ .el-textarea__inner {
  height: 200px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>